import * as echarts from "echarts";
import styles from '../../assets/css/ChineseWesternMedicine/RevenueDataTable.module.css';
import { useEffect, useRef, useState } from 'react';
import { getInfomationcenter } from '../../api/ChineseWesternMedicine/RevenueDataTable';
import { Table } from "antd";

export default function RevenueDataTable() {
    const chartRef = useRef(null);
    const chartRef1 = useRef(null);
    const [weightChart, setWeightChart] = useState([]);
    const [otherdata, setOtherData] = useState([]);
    const [tabledata, setTableData] = useState([]);

    const getDataLeft = async () => {
        const res = await getInfomationcenter({});
        const tableWithKey = res.data.table.map((item, index) => ({
            ...item,
            key: item.id || index, // 如果有 id 字段，用 id；否则用索引 index 作为备用
        }));
        setTableData(tableWithKey);
        setWeightChart(res.data.weightChart.data);
        setOtherData(res.data.departmentChart.otherData); // 获取部门饼图数据
    };
    

    useEffect(() => {
        getDataLeft();
    }, []);

    useEffect(() => {
        let chartInstance = echarts.init(chartRef.current);
        let chartInstance1 = echarts.init(chartRef1.current);
    
        const seriesData = [
            {
                name: '内科综合',
                type: 'bar',
                label: { show: false },
                emphasis: { focus: 'series' },
                data: weightChart.map(item => item['内科综合'])
            },
            {
                name: '外科综合',
                type: 'bar',
                label: { show: false },
                emphasis: { focus: 'series' },
                data: weightChart.map(item => item['外科综合'])
            },
            {
                name: '超声科',
                type: 'bar',
                label: { show: false },
                emphasis: { focus: 'series' },
                data: weightChart.map(item => item['超声科'])
            }
        ];
    
        // 手动定义一个颜色数组
        const colorArray = [
            '#FFB6C1', '#FF6347', '#FFD700', '#9ACD32', '#8A2BE2', '#00CED1', '#FF69B4', '#DC143C'
        ];
    
        // 数据处理
        const pieData = otherdata.map((item, index) => ({
            value: item.value,
            name: item.name,
            color: colorArray[index % colorArray.length]
        }));
    
        const pieDataHandle = (data) => {
            data.sort((a, b) => b.value - a.value);
            return data.map(item => ({ value: item.value, name: item.name }));
        };
    
        // **中间小环形图数据**
        const innerData = [
            { value: weightChart.reduce((sum, item) => sum + (item['超声科'] || 0), 0), name: '超声科' },
            { value: weightChart.reduce((sum, item) => sum + (item['外科综合'] || 0), 0), name: '外科综合' },
            { value: weightChart.reduce((sum, item) => sum + (item['内科综合'] || 0), 0), name: '内科综合' },
        ];
    
        // 饼图配置
        const option1 = {
            backgroundColor: "#FFF",
            color: pieData.map(el => el.color), // 饼图部分颜色
            legend: {
                show: true,
                icon: 'roundRect',
                orient: 'horizontal',
                top: 'top',
                right: '20%',
                itemWidth: 12,
                itemHeight: 12,
                itemGap: 8,
                data: [...pieData.map(el => el.name), ...innerData.map(el => el.name)],
                textStyle: {
                    padding: [0, 0, 0, 10],
                    fontSize: 12,
                    color: '#40C5F1'
                }
            },
            series: [
                // 中间小环形图
                {
                    type: 'pie',
                    radius: ['0%', '35%'], // 设置为实心圆
                    center: ['45%', '50%'],
                    label: {
                        position:'inside',
                        show: true,
                        formatter: '{b}\n{d}%',
                        fontSize: 12,
                        color: '#000'
                    },
                    labelLine: { show: false },
                    data: innerData,
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 0,
                    }
                },
                // 外层大环形图
                {
                    type: 'pie',
                    radius: ['45%', '60%'],
                    center: ['45%', '50%'],
                    data: pieDataHandle(pieData),
                    hoverAnimation: true,
                    label: {
                        show: true,
                        formatter: '{b}\n{d}%',
                        fontSize: 12,
                        color: '#000'
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 0,
                    }
                }
            ]
        };
    
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['本周权重', '本月权重', '季度权重', '年度权重']
            },
            yAxis: {
                type: 'value',
            },
            series: seriesData,
            barCategoryGap: '50%'
        };
    
        chartInstance.setOption(option);
        chartInstance1.setOption(option1);
    }, [weightChart, otherdata]);
    

    const columns = [
        {
            title: '住院部',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '本周服务医务数',
            dataIndex: 'server',
            key: 'server',
        },
        {
            title: '金额',
            dataIndex: 'money',
            key: 'money',
        },
        {
            title: '上周金额',
            dataIndex: 'lastweek',
            key: 'lastweek',
        },
        {
            title: '本月金额',
            dataIndex: 'month',
            key: 'month',
        },
        {
            title: '审计人员',
            dataIndex: 'audit',
            key: 'audit',
        },
        {
            title: '负责人',
            dataIndex: 'chargeperson',
            key: 'chargeperson'
        }
    ];
    return (
        <div className={styles.body}>
            <div className={styles.charts}>
                <div ref={chartRef} style={{ height: "100%", width: '50%', display: 'flex', justifyContent: 'center' }}></div>
                <div ref={chartRef1} style={{ height: "100%", width: '50%', display: 'flex', justifyContent: 'center' }}></div>
            </div>
            <Table title={() => <h1 className={styles.title}>详情数据</h1>} dataSource={tabledata} pagination={false} columns={columns} size="small" />
        </div>
    );
}
